<template>
  <div class="class-page">
    <enterCodeModel :is-show="isShow"  @isShowClose="isShowClose" :is-email="false" type="code" :submit-info-list="submitInfoList"/>
    <div class="back-ground">
      <div class="type-content">
        <div class="card" v-for="(item,index) of cardList">
          <div class="card-title">{{item.title}}</div>
          <div class="card-content">
            <div class="card-select hidden">
                <!--              多级选择-->
                <picker v-if="item.type === 'selectAny'" mode="multiSelector"
                        :range="item.content"
                        :value="item.value"
                        @columnchange="handleChangeSelect($event,item)"
                        @change="pickerChange($event,item)">
                  {{submitInfoList.clazz}} - {{submitInfoList.subclass}} - {{submitInfoList.groups}}
                </picker>
                <!--                双列选择-->
              <picker mode="multiSelector" :range="item.content" v-if="item.type === 'select'"
                      @columnchange="handleChangeSelect($event,item)"
                      :value="item.value"
                      @change="pickerChange($event,item)"
              >
                {{submitInfoList[item.key]}} - {{submitInfoList[item.sub]}}
              </picker>
                <input placeholder="请输入" name="input" v-if="item.type === 'input'" v-model="titleValue[item.key]"/>
                <picker @change="pickerChange($event,item)" 
						:value="item.value"
                        :range="item.content"
                        v-if="item.type === 'selectOnly'"
                >
                  <view class="picker">
                    <span>{{submitInfoList[item.key]}}</span>
                  </view>
                </picker>
                <picker mode="date" :value="item.value" start="2000-09-01"
                        v-if="item.type === 'time'"
                        end="2040-09-01"
                        @change="dateChange($event,item)">
                  <view class="picker">
                    {{submitInfoList[item.key]}}
                  </view>
                </picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-around">
      <div class="card-botton" @click="handleGetNewContentClick">保存</div>
    </div>
  </div>
</template>

<script>
import enterCodeModel from '@/components/enterCodeModel'
export default {
  components: {
    enterCodeModel
  },
  name: "classPage",
  data() {
    return {
      selectNum:0,
      anySelectNum:[],
      isShow: false,
      isEdit: false,
      selectInfoList:[],
      submitInfoList: {
        clazz: '请选择类',
        subclass: '请选择亚类',
        groups:'请选择组',
        type: '请选择型',
        subtype:'请选择分型',
        subgroup: '请选择亚组',
        obj: '请选择对象',
        implement_date: '请选择实施时间',
        release_date: '请选择发布时间',
        effective: '请选择有效性',
        category:'请选择门类',
        department: '请选择司局',
        under_centralized: '请选择归口',
      },
	  titleValue: {},
      subclassList:[],
      groupsList:[],
      cardList:[
        {title:'分类',type:'selectAny',key: 'clazz',content: [],value:[]},
        {title:'分型',type:'select',key: 'type' ,content: [],value:[],sub:'subtype'},
        {title:'亚组',type:'select',key: 'subgroup',content: [],value:[],sub:'obj'},
        // {title:'对象',type:'selectOnly',key: 'obj',content: ['请先选择上一级'],value:[]},
        {title:'国民经济门类',type:'selectOnly',key: 'category',content: [],value:[]},
        {title:'标准号',type: 'input',key: 'standard_number'},
        {title:'标准名称',type: 'input',key: 'standard_name'},
        {title:'发布号',type: 'input',key: 'release_number'},
        {title:'实施时间',type: 'time',key: 'implement_date'},
        {title:'发布日期',type: 'time',key: 'release_date'},
        {title:'司局',type: 'select',key: 'department',content: [],value:[],sub:'under_centralized'},
        // {title:'归口',type: 'selectOnly',key: 'under_centralized',content: ['请先选择上一级'],value:[]},
        {title:'有效性',type: 'selectOnly',key: 'effective',value:[]},
      ],
    }
  },

  onLoad(option){
    this.$api.userPortalGetById({
      standard_id: option.id
    }).then((res) => {
      this.$api.userPortalGetOptionByIndex({
        standard_id: option.id
      }).then((list) => {
        this.cardList[0].value = list.data.clazz
        this.cardList[1].value = list.data.type
        this.cardList[2].value = list.data.subgroup
        this.cardList[3].value = list.data.category ? res.data.category : []
        this.cardList[9].value = list.data.department ? res.data.department : []
        this.cardList[10].value = list.data.effective
        this.isEdit = true
        this.submitInfoList = res.data
		this.submitInfoList.category = res.data.category ? res.data.category : '请选择门类'
		this.submitInfoList.department = res.data.department ? res.data.department : '请选择司局'
		this.submitInfoList.under_centralized = res.data.under_centralized ? res.data.under_centralized : '请选择归口'
		this.titleValue = {
			standard_number: res.data.standard_number,
			standard_name: res.data.standard_name,
			release_number: res.data.standard_number,
		}
        this.submitInfoList.standard_id = option.id
        this.handleGetSelectContent(list)
      })
    }).catch(() => {
      this.handleGetSelectContent()
    })
  },
  methods: {
    handleIndexInSelect(index,name){
      if(name === 'type'){
        this.cardList[1].content[1] = this.selectInfoList.type[index].subtype
        return
      }
      this.cardList[0].content[2] = this.selectInfoList.clazz[index].subclass
    },
    isShowClose(){
      this.isShow = false
    },
    // 列表改变
    handleChangeSelect(e,data){
      if(data.key === 'department' && e.detail.column === 0){
        const deOneList = this.selectInfoList.department.map((item) => {
          return item.department
        })
        const deSecondList = this.selectInfoList.department[e.detail.value].under_centralized
        this.cardList[9].content = [
          deOneList, deSecondList
        ]
      }
      if(data.key === 'subgroup' && e.detail.column === 0){
        const groupOneList = this.selectInfoList.subgroup.map((item) => {
          return item.subgroup
        })
        const groupSecondList = this.selectInfoList.subgroup[e.detail.value].obj
        this.cardList[2].content = [
          groupOneList, groupSecondList
        ]
        return;
      }
      if(data.key === 'clazz' && e.detail.column === 0){
        const list = this.selectInfoList.clazz[e.detail.value]
        this.selectNum = e.detail.value
          const clazzOneList = this.selectInfoList.clazz.map((item) => {
            return item.clazz
          })
        const clazzSecondList = list.subclass.map((item) => {
            return item.subclass
        })
          const clazzThirdList = list.subclass[0].groups
          this.cardList[0].content = [
            clazzOneList,clazzSecondList,clazzThirdList
          ]
          return
      }
      if(data.key === 'clazz' && e.detail.column === 1){
        const subList =  this.selectInfoList.clazz[this.selectNum].subclass[e.detail.value]
        const clazzOneList = this.selectInfoList.clazz.map((item) => {
          return item.clazz
        })
        const clazzSecondList = this.selectInfoList.clazz[this.selectNum].subclass.map((item) => {
          return item.subclass
        })
        const clazzThirdList = subList.groups
        this.cardList[0].content = [
          clazzOneList,clazzSecondList,clazzThirdList
        ]
        return
      }
      if(e.detail.column !== 0)return;
      const typeOneList = this.selectInfoList.type.map((item) => {
        return item.type
      })
      const typeSecondList = this.selectInfoList.type[e.detail.value].subtype
      this.cardList[1].content = [
        typeOneList, typeSecondList
      ]
    },
    dateChange(e,data) {
      this.submitInfoList[data.key] = e.detail.value
    },
    //提交方法
    handleGetNewContentClick(){
		let new_obj = JSON.parse(JSON.stringify(this.submitInfoList))
		let keys = Object.getOwnPropertyNames(this.submitInfoList)
		keys.pop()
		for(let i in keys) {
			if(i < 10) {
				if(this.submitInfoList[keys[i]].substring(0,1) === '请') {
					let text = ''
					if(i<3) {
						text = '请选择分类'
					}else if(i<5) {
						text = '请选择分型'
					}else if(i<7) {
						text = '请选择亚组'
					}else if(i<8) {
						text = '请选择实施时间'
					}else if(i<9) {
						text = '请选择发布日期'
					}else if(i<10) {
						text = '请选择有效性'
					}
					wx.showToast({title: text,icon: 'none',})
					return
				}
			}else{
				if(this.submitInfoList[keys[i]].substring(0,1) === '请') {
					new_obj[keys[i]] = ''
				}
			}
		}
		if(!this.titleValue.standard_number) return wx.showToast({title: '请输入标准号',icon: 'none',})
		if(!this.titleValue.standard_name) return wx.showToast({title: '请输入标准名称',icon: 'none',})
		if(!this.titleValue.release_number) return wx.showToast({title: '请输入发布号',icon: 'none',})
		new_obj.standard_number = this.titleValue.standard_number
		new_obj.standard_name = this.titleValue.standard_name
		new_obj.release_number = this.titleValue.release_number
      if(this.isEdit){
        this.isShow = true
        return
      }
      this.$api.userPortalCreate(new_obj).then((res) => {
        wx.showToast({
          title: res.msg,
          icon: 'none',
        })
        if(res.code !== 200)return
        wx.navigateBack({
          delta: 1
        })
      })
    },
    //获取下拉内容
    handleGetSelectContent(data){
      this.$api.userPortalConfigByColumn({

      }).then((res) => {
        this.selectInfoList = res.data
        //分类
        const clazzOneList = res.data.clazz.map((item) => {
          return item.clazz
        })
        const clazzSecondList = res.data.clazz[0].subclass.map((item) => {
          return item.subclass
        })
        const clazzThirdList = res.data.clazz[0].subclass[0].groups
        this.cardList[0].content = [
          clazzOneList,clazzSecondList,clazzThirdList
        ]
        // 分型
        const typeOneList = res.data.type.map((item) => {
          return item.type
        })
        const typeSecondList = res.data.type[0].subtype
        this.cardList[1].content = [
          typeOneList, typeSecondList
        ]
        // 司局
        const deOneList = res.data.department.map((item) => {
          return item.department
        })
        const deSecondList = res.data.department[0].under_centralized
        this.cardList[9].content = [
          deOneList, deSecondList
        ]
        // 亚组
        const groupOneList = res.data.subgroup.map((item) => {
          return item.subgroup
        })
        const groupSecondList = res.data.subgroup[0].obj
        this.cardList[2].content = [
          groupOneList, groupSecondList
        ]
		// 门类
		this.cardList[3].content = res.data.category
		// 有效性
		this.cardList[10].content = res.data.effective
        if(this.isEdit === true){
          //分类
          const clazzIndex = data.data.clazz[0]
          const clazzSubIndex = data.data.clazz[1]
          const clazzOneList = this.selectInfoList.clazz.map((item) => {
            return item.clazz
          })
          const clazzSecondList = res.data.clazz[clazzIndex].subclass.map((item) => {
            return item.subclass
          })
          const clazzThirdList = res.data.clazz[clazzIndex].subclass[clazzSubIndex].groups
          this.cardList[0].content = [
            clazzOneList,clazzSecondList,clazzThirdList
          ]
          //分型
          const typeOneList = this.selectInfoList.type.map((item) => {
            return item.type
          })
          const typeIndex = data.data.type[0]
          const typeSecondList = this.selectInfoList.type[typeIndex].subtype
          this.cardList[1].content = [
            typeOneList, typeSecondList
          ]
          //司局
          const deOneList = this.selectInfoList.department.map((item) => {
            return item.department
          })
          const deIndex = data.data.department[0]
          const deSecondList = this.selectInfoList.department[deIndex].under_centralized
          this.cardList[9].content = [
            deOneList, deSecondList
          ]
          //亚组
          const groupOneList = this.selectInfoList.subgroup.map((item) => {
            return item.subgroup
          })
          const groupIndex = data.data.subgroup[0]
          const groupSecondList = this.selectInfoList.subgroup[groupIndex].obj
          this.cardList[2].content = [
            groupOneList, groupSecondList
          ]
        }
      })
    },
    pickerChange(e,data) {
      if(data.key === 'clazz'){
        this.submitInfoList.clazz = data.content[0][e.detail.value[0]]
        this.submitInfoList.subclass = data.content[1][e.detail.value[1]]
        this.submitInfoList.groups = data.content[2][e.detail.value[2]]
        return
      }
      if(data.key === 'type'){
        this.submitInfoList.type = data.content[0][e.detail.value[0]]
        this.submitInfoList.subtype = data.content[1][e.detail.value[1]]
        return
      }
      if(data === 'groups'){
        this.submitInfoList.groups = this.groupsList[Number(e.detail.value)]
      }
      if(data === 'subclass'){
        this.submitInfoList.subclass = this.subclassList[Number(e.detail.value)]
        this.$api.userPortalGetGroup({
          subclass: this.submitInfoList.subclass,
          clazz: this.submitInfoList.clazz
        }).then((res) => {
          this.submitInfoList.groups = '请选择组'
          this.groupsList = res.data
        })
      }
      this.submitInfoList[data.key] = data.content[Number(e.detail.value)]
      if(data.key === 'clazz'){
        this.$api.userPortalGetSubClass({
          [data.key]: this.submitInfoList.clazz
        }).then((res) => {
          this.subclassList = res.data
          this.submitInfoList.subclass = '请选择亚类'
          this.submitInfoList.groups = '请选择组'
        })
      }
      if(data.key === 'department'){
        this.submitInfoList.department = data.content[0][e.detail.value[0]]
        this.submitInfoList.under_centralized = data.content[1][e.detail.value[1]]
        return
      }
      if(data.key === 'subgroup'){
        this.submitInfoList.subgroup = data.content[0][e.detail.value[0]]
        this.submitInfoList.obj = data.content[1][e.detail.value[1]]
        return
      }
      this.submitInfoList[data.key] = data.content[Number(e.detail.value)]
    },
  }
}
</script>

<style scoped lang="scss">
span {
  overflow: scroll;
  white-space: nowrap;
  width: 100px;
}
.hidden {
  overflow-x: scroll;
  white-space: nowrap;
}
.class-page {
  min-height: 100%;
    .card-botton {
      color: #FFFFFF;
      width: 100%;
      height: 75rpx;
      background-color: #59AC35;
      border-radius: 16rpx;
      font-size: 40rpx;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
    }
  .back-ground {
    z-index: -1;
    background-image: linear-gradient(#6ACC40,#59AC35) ;
    height: 200rpx;
  }
  .type-content {
    width: 100%;
    position: absolute;
    padding: 24rpx 24rpx 150rpx 24rpx;
    background-color:transparent;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    .card {
      width: 100%;
      margin-top: 24rpx;
      height: 230rpx;
      display: flex;
      flex-direction: column;
      border-radius: 16rpx 16rpx 0 0;
      background-color: #FFFFFF;
      .card-content {
        padding: 24rpx;
        display: flex;
        align-items: center;
        overflow: scroll;
        text-overflow:ellipsis;
        white-space: nowrap;
        .card-select {
          align-items: center;
          justify-content: space-between;
          width: 100%;
          border-radius: 12rpx;
          background-color: #F7F8FA;
          padding: 24rpx;
          border: rgba(89,172,53,1) 2rpx solid;
          font-size: 40rpx;
          font-weight: 700;
          .select-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .card-icon {
            width: 12rpx;
            height: 22rpx;
          }
        }
      }
      .card-title {
        border-bottom: 4rpx #EEEEEE solid;
        height: 100rpx;
        border-radius: 16rpx 16rpx 0 0;
        font-size: 40rpx;
        font-weight: 700;
        text-align: left;
        display: flex;
        align-items: center;
        padding: 24rpx;
      }
    }
  }
}
</style>
